/**
*@description CRM运营》回柜
*@author daycool
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
import LineStack from '../components/CRM/LineStack';
import MyRangePicker from '../components/CRM/MyRangePicker';

import moment from 'moment';
import styles from './HomePage.less';
import {Card, Icon, Tooltip, Table, Row, Col, Button, DatePicker, Radio} from 'antd';
import toExcel from '../utils/toExcel';
import downImg from '../utils/downImg';

const {RangePicker,MonthPicker} = DatePicker;
import utils from '../utils/utils';
const {startDate, endDate} = utils.getDefaultDateRange();
const dateFormat = 'YYYY-MM';const RadioGroup = Radio.Group;

const columns = [
  { title: '指标', width: 190, dataIndex: 'name', key: 'name', fixed: 'left' },
  { title: '2016年1月', dataIndex: 'value1', key: '1'},
  { title: '2016年2月', dataIndex: 'value2', key: '2' },
  { title: '2016年3月', dataIndex: 'value3', key: '3' },
  { title: '2016年4月', dataIndex: 'value4', key: '4' },
  { title: '2016年5月', dataIndex: 'value5', key: '5' },
  { title: '2016年6月', dataIndex: 'value6', key: '6' },
  { title: '2016年7月', dataIndex: 'value7', key: '7' },
  { title: '2016年8月', dataIndex: 'value8', key: '8' },
  { title: '2016年9月', dataIndex: 'value9', key: '9', fixed: 'right',
    width: 80 },
];

const areaColums = [
  {title: '指标', dataIndex: 'name', key: 'name', fixed: 'left', width: 190,},
  { title: '北京', dataIndex: 'value1', key: '1'},
  { title: '成都', dataIndex: 'value2', key: '2' },
  { title: '大连', dataIndex: 'value3', key: '3' },
  { title: '广州', dataIndex: 'value4', key: '4' },
  { title: '杭州', dataIndex: 'value5', key: '5' },
  { title: '昆明', dataIndex: 'value6', key: '6' },
  { title: '南京', dataIndex: 'value7', key: '7' },
  { title: '上海', dataIndex: 'value8', key: '8' },
  { title: '沈阳', dataIndex: 'value9', key: '9', fixed: 'right', width: 80 },
];

const data = [{
  key: '1',
  name: '销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '2',
  name: '会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '3',
  name: '新会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '4',
  name: '老会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '5',
  name: '首单350以上的新会员的销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}];


class CRMSale extends Component {
  constructor(props) {
      super(props);
  }
  state = {
    monthMemberType: "新会员",
    areaMemberType: "新会员",
    customerSingle: "整体会员",
    monthMemberStartDate: startDate,
    monthMemberEndDate: endDate,
    areaMemberStartDate: startDate,
    areaMemberEndDate: endDate,
    memberConsumeStartDate: startDate,
    memberConsumeEndDate: endDate,
    customerSingleStartDate: startDate,
    customerSingleEndDate: endDate,
  }
  componentWillMount() {
    this.initData();
  };
  onChange = (type, e) => {
    var currState = {
      [type]: e.target.value,
    };
    this.setState(currState);
  }
  // 获取数据
  fetchData(type, params){
    this.props.dispatch({
      type: type,
      payload: params
    });
  };
  fetchMonthMemberData(){
    this.fetchData('CRMdata/monthMember', {
      startMonth: this.state.monthMemberStartDate,
      endMonth: this.state.monthMemberEndDate,
      vipType: this.state.monthMemberType,
    });
  }
  fetchAreaMemberData(){
    this.fetchData('CRMdata/areaMember', {
      startMonth: this.state.areaMemberStartDate,
      endMonth: this.state.areaMemberEndDate,
      vipType: this.state.areaMemberType,
    });
  }
  fetchMemberConsumeData(){
    this.fetchData('CRMdata/memberConsume', {
      startMonth: this.state.memberConsumeStartDate,
      endMonth: this.state.memberConsumeEndDate,
    });
  }
  fetchCustomerSingleData(){
    this.fetchData('CRMdata/customerSingle', {
      startMonth: this.state.customerSingleStartDate,
      endMonth: this.state.customerSingleEndDate,
      vipType: this.state.customerSingle,
    });
  }
  initData(){
    this.fetchMonthMemberData();
    this.fetchAreaMemberData();
    this.fetchMemberConsumeData();
    this.fetchCustomerSingleData();
  };
  onDateChange(type, date, dateString) {
    type = type.replace('Type', '');
    let currState = {
      [type + 'StartDate']: dateString[0],
      [type + 'EndDate']: dateString[1],
    };
    this.setState(currState);
  };
  onAreaDateChange(date, dateString) {
    this.setState({
      areaStartDate: dateString[0],
      areaEndDate: dateString[1]
    });
  };
  onVipDateChange(date, dateString){
    this.setState({
      memberConsumeStartDate: dateString[0],
      memberConsumeEndDate: dateString[1]
    });
  };
  monthMemberOk(){
    this.fetchMonthMemberData();
  };
  monthMemberDownload(){
    this.exExcel(this.props.CRMdata.monthMemberDownloadData, '月度会员表现');
  };
  areaMemberOk(){
    this.fetchAreaMemberData();
  };
  areaMemberDownload(){
    this.exExcel(this.props.CRMdata.areaMemberDownloadData, '地区会员表现');
  };
  memberConsumeOk(){
    this.fetchMemberConsumeData();
  };
  memberConsumeDownload(){
    this.exExcel(this.props.CRMdata.memberConsumeDownloadData, '会员累计消费分布');
  };
  customerSingleOk(){
    this.fetchCustomerSingleData();
  };
  customerSingleDownload(){
    this.exExcel(this.props.CRMdata.customerSingleDownloadData, '客单价及客单件分布');
  };

  exExcel(downloadData, title){
      toExcel(downloadData.header, title, downloadData.data);
  };
  render(){
    const tips1 = (<Row>
        <Col span={6}>月度会员表现</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <RadioGroup onChange={this.onChange.bind(this, 'monthMemberType')} value={this.state.monthMemberType}>
            <Radio value="新会员">新会员</Radio>
            <Radio value="老会员">老会员</Radio>
          </RadioGroup>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'monthMemberType')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.monthMemberOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.monthMemberDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
          </Col>
      </Row>);
    const tips2 = (<Row>
        <Col span={6}>地区会员表现</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <RadioGroup onChange={this.onChange.bind(this, 'areaMemberType')} value={this.state.areaMemberType}>
            <Radio value="新会员">新会员</Radio>
            <Radio value="老会员">老会员</Radio>
          </RadioGroup>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'areaMemberType')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.areaMemberOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.areaMemberDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
        </Col>
      </Row>);
    const tips3 = (<Row>
        <Col span={6}>会员累计消费分布</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onVipDateChange.bind(this)} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
          <Button type="primary" onClick={this.memberConsumeOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.memberConsumeDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
        </Col>
      </Row>);
    const tips4 = (<Row>
      <Col span={6}>客单价及客单件分布</Col>
      <Col span={18} style={{textAlign:"right"}}>
        <RadioGroup onChange={this.onChange.bind(this, 'customerSingle')} value={this.state.customerSingle}>
          <Radio value="整体会员">整体会员</Radio>
          <Radio value="当年会员">当年会员</Radio>
          <Radio value="当月会员">当月会员</Radio>
        </RadioGroup>
        <MyRangePicker style={{ width: 200,verticalAlign:'middle',textAlign:'left' }} onChange={this.onDateChange.bind(this, 'customerSingle')} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
        <Button type="primary" onClick={this.customerSingleOk.bind(this)} className= {styles.searchOk}>确定</Button>
        <Button type="primary" onClick={this.customerSingleDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
      </Col>
      </Row>);
  return (
    <MainLayout isShowLeft="showCRM">
        <div style={{marginTop:29}}>
                <Card title={tips1} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.monthMemberData.columns} dataSource={this.props.CRMdata.monthMemberData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips2} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.areaMemberData.columns} dataSource={this.props.CRMdata.areaMemberData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips3} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.memberConsumeData.columns} dataSource={this.props.CRMdata.memberConsumeData.data} scroll={{ x: 1300 }} />
                </Card>
                <Card title={tips4} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} columns={this.props.CRMdata.customerSingleData.columns} dataSource={this.props.CRMdata.customerSingleData.data} scroll={{ x: 1300 }} />
                </Card>
        </div>
    </MainLayout>
  );
  }
};

CRMSale.propTypes = {
};

function mapStateToProps({ CRMdata }) {
  return {
    CRMdata: {...CRMdata},
  };
}

export default connect(mapStateToProps)(CRMSale);
